<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form id="uploadForm" enctype="multipart/form-data">
			<input class="upload-open-photo" accept="image/*" type="file" id="filechooser" />
		</form>
		<img id="img" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			document.getElementById('filechooser').addEventListener('change', function(e) {
				btnUploadFile(e)
			}, false);

			function btnUploadFile(e) {
				//获取图片
				var self = this;
				var filechooser = document.getElementById('filechooser');
				var previewer = document.getElementById('previewer');
				var that = e.target;
				var files = that.files;
				var file = files[0];
				//判断拍摄方向，
				//				EXIF.getData(file, function() {
				//					self.orientation = EXIF.getTag(this, 'Orientation');
				//				});
				self.orientation = 6;
				self.fileData = file;
				// 接受 jpeg, jpg, png 类型的图片
				if(!/\/(?:jpeg|jpg|png)/i.test(file.type)) {
					return;
				}
				var reader = new FileReader();
				reader.onload = function() {
					var result = this.result;
					var img = new Image();
					//进行图片的渲染
					img.onload = function() {
						//图片旋转压缩处理后的base64
						var compressedDataUrl = self.compress(img, self.fileData.type);
						//渲染到img标签上
						toPreviewer(compressedDataUrl);
						img = null;
					};
					img.src = result;
				};
				reader.readAsDataURL(self.fileData);
			}

			//对图片进行旋转，压缩的方法，最终返回base64  渲染给img标签的src
			function compress(img, fileType) {
				var degree = 0,
					drawWidth, drawHeight, width, height;
				drawWidth = img.width;
				drawHeight = img.height;
				//以下改变一下图片大小
				var maxSide = Math.max(drawWidth, drawHeight);
				if(maxSide > 1024) {
					var minSide = Math.min(drawWidth, drawHeight);
					minSide = minSide / maxSide * 1024;
					maxSide = 1024;
					if(drawWidth > drawHeight) {
						drawWidth = maxSide;
						drawHeight = minSide;
					} else {
						drawWidth = minSide;
						drawHeight = maxSide;
					}
				}
				var canvas = document.createElement('canvas');
				canvas.width = width = drawWidth;
				canvas.height = height = drawHeight;
				var context = canvas.getContext('2d');
				//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
				if(true) {
					//					if($.device.ios) {
					switch(this.orientation) {
						//iphone横屏拍摄，此时home键在左侧
						case 3:
							degree = 180;
							drawWidth = -width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
						case 6:
							canvas.width = height;
							canvas.height = width;
							degree = 90;
							drawWidth = width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在上方
						case 8:
							canvas.width = height;
							canvas.height = width;
							degree = 270;
							drawWidth = -width;
							drawHeight = height;
							break;
					}
				}
				//使用canvas旋转校正
				context.rotate(degree * Math.PI / 180);
				context.drawImage(img, 0, 0, drawWidth, drawHeight);
				// 压缩0.5就是压缩百分之50
				var base64data = canvas.toDataURL(fileType, 0.5);
				canvas = context = null;
				this.urlbase = base64data;
				console.log(base64data)
				return base64data;
			}

			function toPreviewer(dataUrl) {
				
				var img = document.getElementById('img');
				img.src = dataUrl;
			}
		</script>
	</body>

</html>